<template>
    <div class="extension-number-input-adapter">
        <span class="extension-params-label">{{ props.displayName }}</span>
        <el-input-number
            v-model="modelValue!"
            :min="props.min"
            :max="props.max"
            :step="props.step"
            :precision="props.precision"
            @change="inputChange"
        />
        <el-tooltip v-if="props.tip" :content="props.tip">
            <el-icon>
                <QuestionFilled />
            </el-icon>
        </el-tooltip>
        <el-button type="primary" link class="clear-btn" @click="clear">清空</el-button>
    </div>
</template>

<script lang="ts" setup>
import {defineModel, defineProps, defineEmits} from 'vue';
import {ElInputNumber, ElButton, ElIcon, ElTooltip} from 'element-plus';
import {QuestionFilled} from '@element-plus/icons-vue';

const modelValue = defineModel<number | null>();

const props = defineProps({
    tip: String,
    displayName: [String, Array],
    min: Number,
    max: Number,
    step: Number,
    precision: Number,
    disabled: Boolean,
    readonly: Boolean
});

const emit = defineEmits(['update:modelValue']);

const inputChange = (val) => {
    emit('update:modelValue', val);
};

const clear = () => {
    modelValue.value = null;
    emit('update:modelValue', null);
};
</script>

<style lang="less" scoped>
@import '../css/lib.less';
.extension-number-input-adapter {
    margin-top: 12px;
    .extension-params-label {
        line-height: 32px;
        display: inline-block;
        width: 13em;
        text-align: right;
        vertical-align: bottom;
        margin-right: 12px;
    }
    .tip-icon {
        color: @dls-color-gray-7;
        margin-left: 12px;
    }
    .clear-btn {
        margin-left: 12px;
    }
}
</style>
